<template name="HomePage">
  <div class="content-container">
    <!-- 顶部 -->
    <div class="container-top">
      <!-- 轮播图 -->
      <el-carousel class="carousel header-common" motion-blur indicator-position="none">
        <el-carousel-item v-for="carousel in carouselList" :key="carousel.targetId">
          <img :src="carousel.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
      <!-- 猜你喜欢 -->
      <div class="guess-like header-common">
        <div class="like-title">
          <span>{{ Utils.getSalutation() }}</span
          >，猜你最近喜欢听
        </div>
      </div>
    </div>
    <!-- 精选歌单 -->
    <el-skeleton class="container-list" animated :loading="Boolean(topPlaylist.length)">
      <template #template>
        <div style="height: 100%">
          <div class="list-title">精选歌单</div>
          <div class="list">
            <KeepAlive>
              <ImageBox v-for="item in topPlaylist" :key="item.id" :item="item" />
            </KeepAlive>
          </div>
        </div>
      </template>
      <template #default>
        <component :is="emptyDiv('精选歌单', 6)"></component>
      </template>
    </el-skeleton>
    <!-- 推荐歌单 -->
    <el-skeleton class="container-list" animated :loading="Boolean(personalizedList.length)">
      <template #template>
        <div style="height: 100%">
          <div class="list-title">推荐歌单</div>
          <div class="list">
            <ImageBox v-for="item in personalizedList" :key="item.id" :item="item" />
          </div>
        </div>
      </template>
      <template #default>
        <component :is="emptyDiv('推荐歌单', 6)"></component>
      </template>
    </el-skeleton>
    <!-- 榜单精选 -->
    <div class="container-rank" v-if="loading" ref="topListRef">
      <div class="list-title">榜单精选</div>
      <div class="rank-list">
        <div class="rank" v-for="rank in newTopList" :key="rank.id">
          <div class="rank-title">
            <span>{{ rank.name }}</span>
            <span>{{ rank.updateFrequency }}</span>
          </div>
          <div class="rank-content" @mouseenter="rank.flag = true" @mouseleave="rank.flag = false">
            <img v-lazy="song.picUrl" alt="" v-for="song in rank.songs" :key="song.picUrl" />
            <div class="cursor" :class="{ 'hover-active': rank.flag }"></div>
            <i class="iconfont icon icon-shipinbofangshibofang cursor" v-show="rank.flag"></i>
            <div class="content-list">
              <div
                class="list over-ellipsis"
                v-for="(song, index) in rank.songs"
                :key="song.picUrl"
                @click="clickTopList(song)"
              >
                <span>{{ index + 1 }}</span>
                <span>{{ song.name }}</span>
                <span>-{{ song.author }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-rank" v-else ref="topListRef">
      <div class="list-title">榜单精选</div>
      <div class="rank-list">
        <div class="rank" v-for="rank in 4" :key="rank">
          <el-empty
            :image-size="70"
            description="暂无数据"
            style="background-color: #fff; flex: '0 0 15%'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import Utils from '@/utils/commonUtils'
import useHomePageApi from './hooks/useHomePageApi'
import ImageBox from '@/components/imageBox/index.vue'
import type { topListType } from './type'
import { onBeforeUnmount, onMounted, ref } from 'vue'
const { getTopList, carouselList, personalizedList, topPlaylist, newTopList, loading } =
  useHomePageApi()
const topListRef = ref<HTMLElement | null>(null)
const observer = ref()
onMounted(() => {
  // 检测元素是否在视图窗口的函数
  observer.value = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        getTopList()
      }
    })
  })
  observer.value.observe(topListRef.value as HTMLElement)
})
// 榜单精选点击事件
const clickTopList = (obj: topListType) => {
  console.log(obj, 'obj')
}
// 空组件
const emptyDiv = (name: string, size: number) => {
  return (
    <div class="container-list">
      <div class="list-title">{name}</div>
      <div
        class="list"
        style="display: flex; justify-content: space-between; height: calc(100% - 2.625rem)"
      >
        {Array.from({ length: size }).map((_, i) => (
          <el-empty
            image-size={80}
            description="暂无数据"
            key={i}
            style={{
              borderRadius: '.75rem',
              backgroundRepeat: 'no-repeat',
              backgroundSize: `cover`,
              marginRight: '2%',
              flex: '0 0 15%',
              height: 'auto',
              backgroundColor: '#fff'
            }}
          />
        ))}
      </div>
    </div>
  )
}
// 离开组件及时销毁
onBeforeUnmount(() => {
  if (observer.value) {
    observer.value.unobserve(topListRef.value) //解绑元素
    observer.value.disconnect() //停止监听
  }
})
</script>

<style scoped lang="less">
.content-container {
  .container-top {
    width: 100%;
    min-height: 9.375rem;
    height: 23%;
    display: flex;

    /deep/.el-carousel__container {
      height: 100%;
    }

    .header-common {
      height: 100%;
      width: 32%;
      border-radius: 0.9375rem;
      margin-right: 2%;
    }

    .carousel {
      img {
        height: 100%;
        width: 100%;
        border-radius: 0.9375rem;
      }
    }

    .guess-like {
      padding: 0.75rem;
      background-color: #fff;

      .like-title {
        font-weight: 700;
        color: #2a3246;

        span {
          font-size: 20px;
        }
      }
    }
  }

  .container-list {
    height: 44%;
    margin: 1.25rem 0;

    .list {
      height: calc(100% - 2.625rem);
      width: 100%;
      display: flex;
      align-content: flex-start;
      flex-flow: row nowrap;
      overflow: hidden;
    }
  }

  .container-rank {
    min-height: 9.375rem;

    .rank-list {
      display: flex;
      flex-wrap: wrap;

      .rank {
        display: flex;
        flex-direction: column;
        gap: 0.8125rem;
        padding: 0.875rem 1.25rem;
        flex: 0 0 32%;
        margin: 0 2% 2% 0;
        height: 9.375rem;
        border-radius: 0.75rem;
        box-shadow: 0 0 0.75rem #efeff0;
        background-color: #fff;

        &:nth-child(3n + 3) {
          margin-right: 0;
        }

        .rank-title {
          display: flex;
          line-height: 1.25rem;
          justify-content: space-between;

          & span:first-child {
            font-size: 1.25rem;
            color: #3f4658;
            font-weight: 700;
          }

          & span:nth-child(2) {
            font-size: 0.875rem;
            color: #bfc2c9;
          }
        }

        .rank-content {
          flex: auto;
          width: 100%;
          position: relative;

          .icon {
            position: absolute;
            top: 17%;
            left: 8%;
            z-index: 4;
            font-size: 1.875rem;
          }

          .hover-active {
            position: absolute;
            width: 25%;
            height: 96%;
            z-index: 3;
            background-color: #3e3c3c36;
            border-radius: 5%;
          }

          img {
            cursor: pointer;
            position: absolute;
            box-shadow: 0 0 0.5rem #d7d9de;
            border-radius: 5%;
            height: auto;
          }

          & img:nth-child(1) {
            width: 25%;
            left: 0%;
            z-index: 3;
          }

          & img:nth-child(2) {
            width: 20%;
            left: 8%;
            top: 10%;
            z-index: 2;
          }

          & img:nth-child(3) {
            width: 15%;
            left: 16%;
            z-index: 1;
            top: 19%;
          }

          .content-list {
            position: absolute;
            width: 65%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            right: 0;

            .list {
              cursor: pointer;

              span {
                margin-right: 0.3125rem;
                font-size: 0.875rem;
                color: #3f4658;
              }

              & span:nth-child(3) {
                color: #b4b7be;
              }
            }
          }
        }
      }
    }
  }
}
</style>
